<template>
  <div class="brands_wrap">
    <BreadCrumb crumb="品牌管理"></BreadCrumb> 

    <div class="top_bar">
       <Addbrands @fnResetTable="fnGetData"></Addbrands>       
    </div>

    <BrandsTable :brands="aBrandsList" @fnResetTable="fnGetData"></BrandsTable>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      :current-page="page"
      style="text-align:center;margin-top:10px"
      @current-change="fnGetPage"
      >
    </el-pagination>
  </div>
</template>

<script>
import BreadCrumb from '@/components/widget/BreadCrumb'
import Addbrands from '@/components/widget/AddBrands'
import BrandsTable from '@/components/widget/BrandsTable'
import cons from '@/components/constant'

export default {
  name: 'Brands',
  data () {
    return {
      page:1,
      total:0,
      pagesize:2,
      aBrandsList:[]
    }
  },
  components:{
    BreadCrumb,
    Addbrands,
    BrandsTable
  },
  // 当前组件刚完成挂载 就立即执行
  mounted(){
    this.fnGetData(1);
  },
  
  methods:{
    // 加载所有品牌数据
    fnGetData(){
      this.axios.get(cons.apis+'/v1/goods/brands/',{
        params:{ // 查询参数
          page:this.page,
          pageSize:this.pagesize
        },
        headers:{
          'Authorization':'JWT'+localStorage.token
        },
        responseType:'json'
      })
      .then((res) => {
        console.log('加载所有的品牌数据:',res)
        if (res.status == 200){
          this.aBrandsList = res.data
        }else{
          this.$message({
            type:'error',
            message:'加载品牌出错,请查看控制台'
          })
        }
      }).catch((err) => {
        console.log(err)
      });
    },
  }
}
</script>

<style scoped>
.top_bar{
    width:95.2%;
    overflow:hidden;
    margin:10px auto;
  }
</style>
